<template>
  <div>
    <a-layout>
      <a-layout-header>
        <div class="headerCon">
          <div class="logo">
            <a-space>
              <div class="hoslogo">
                <img src="../../assets/logo1.png" alt="" />
              </div>
            </a-space>
          </div>
          <div class="timecon">
            <div class="dateNow">
              <span class="date">{{ data1.date }}</span>
              <span class="time">{{ data1.time }}</span>
              <span>{{ data1.week }}</span>
            </div>
            <div class="line">
              <a-divider type="vertical" />
            </div>
            <div class="icon">
              <div class="circle">
                <clock-circle-outlined :style="{ fontSize: '20px' }" />
              </div>
            </div>
            <div
              ref="refMenu"
              class="personal"
              @mouseenter="enter"
              @mouseleave="leave"
            >
              <div class="content">
                <div class="pic">
                  <img src="@/assets/logo.png" alt="" />
                </div>
                <div class="name"><span>Iron Man</span></div>
              </div>
            </div>
          </div>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider :width="'150px'"
          ><a-menu class="sider-menus" theme="light" mode="inline">
            <a-menu-item v-for="(item, index) in arr" :key="index">
              <user-outlined />
              <span>{{ item.id }}</span>
            </a-menu-item>
          </a-menu></a-layout-sider
        >
        <a-layout-content>
          <div class="mainCon">
            <div class="serch">
              <div class="serchCon">
                <a-form :model="formState" :style="{ width: '90%' }">
                  <a-row :gutter="12" :style="{ height: '40px' }">
                    <a-col :span="4">
                      <a-form-item label="患者查询">
                        <a-input
                          allowClear
                          v-model:value="formState.serch"
                          placeholder="患者查询"
                        />
                      </a-form-item>
                    </a-col>
                    <a-col :span="3">
                      <a-form-item label="性别">
                        <a-select
                          allowClear
                          v-model:value="formState.gender"
                          placeholder="患者性别"
                          :options="genderOptions"
                        >
                        </a-select>
                      </a-form-item>
                    </a-col>

                    <a-col :span="4">col-6</a-col>
                    <a-col :span="4">col-6</a-col>
                    <a-col :span="4">col-6</a-col>
                    <a-col :span="5">col-6</a-col>
                  </a-row>
                </a-form>
              </div>
            </div>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
    <div
      ref="hoverDiv"
      @mouseenter="enter"
      @mouseleave="leave"
      class="menuHover"
    >
      <div><user-outlined />&nbsp;&nbsp;个人信息</div>
      <div><poweroff-outlined />&nbsp;&nbsp;推出系统</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive, onUnmounted } from "vue";
import { useHomeStore } from "@/store/modules/home";
import {
  UserOutlined,
  ClockCircleOutlined,
  PoweroffOutlined,
} from "@ant-design/icons-vue";
onMounted(() => {
  timeNum.value = setInterval(getTime, 1000);
  console.log("useHomeStore(): ", useHomeStore());
});
onUnmounted(() => {
  clearInterval(timeNum.value);
});
const genderOptions = [
  { label: "男", value: "男" },
  { label: "女", value: "女" },
];
const formState = reactive({
  serch: "",
  gender: "",
  doczhuren: "",
  doczhuzhi: "",
  yuanqu: "",
  gettime: "",
});

const hoverDiv = ref();
const refMenu = ref();
const timeNum = ref();
const data1 = ref({
  date: "",
  week: "",
  time: "",
});
const weeks = reactive([
  "星期天",
  "星期一",
  "星期二",
  "星期三",
  "星期四",
  "星期五",
  "星期六",
]);
const arr = ref([
  { id: "nav1", key: "1" },
  { id: "nav2", key: "2" },
  { id: "nav3", key: "3" },
  { id: "nav4", key: "4" },
  { id: "nav5", key: "5" },
]);
const enter = () => {
  hoverDiv.value.style.display = "block";
};
const leave = () => {
  hoverDiv.value.style.display = "none";
};

const getTime = () => {
  const date = new Date();
  const year = date.getFullYear();
  const mounth = (date.getMonth() + 1 + "").padStart(2, "0");
  const dateNow = date.getDate();
  const week = date.getDay();
  const hours = date.getHours();
  const minutes = date.getMinutes();
  data1.value.date = `${year}年${mounth}月${dateNow}日`;
  data1.value.week = weeks[week];
  data1.value.time = `${hours}: ${minutes}`;
};
</script>

<style lang="less">
.mainCon {
  width: 100%;
  height: 100%;
  background-color: #f7faf9;
  padding: 12px 12px 0 12px;
}
.serch {
  height: 68px;
  background-color: #fff;
  padding: 14px;
  border-radius: 12px;
  .serchCon {
    height: 100%;
    .ant-row {
      display: flex;
      align-items: center;
      .ant-form-item {
        height: 100%;
        margin-bottom: 0;
        border: 1px solid #b4c7c6;
        border-radius: 8px;
        padding: 3px 6px;
        box-sizing: border-box;
        .ant-input {
          border: none;
          outline: none;
        }
        .ant-input:placeholder-shown {
          text-overflow: ellipsis;
        }
      }
      .ant-form-item-control-input {
        box-sizing: border-box;
      }
      .ant-col {
        height: 100%;
      }
      .ant-input-affix-wrapper {
        border: none;
      }
      .ant-input-affix-wrapper-focused,
      .ant-select-show-arrow {
        border-radius: 8px;
      }
      .ant-form-item-label > label::after {
        content: none;
      }
      .ant-form-item-label {
        margin-right: 4px;
      }

      .ant-select-selector {
        border: none;
      }
    }
  }
}

.menuHover {
  display: none;
  position: absolute;
  right: 72px;
  top: 70px;
  padding: 10px 10px 0;
  background-color: white;
  div {
    margin-bottom: 6px;
  }
}
.headerCon {
  position: relative;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.timecon {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  .line {
    margin-right: 8px;
  }
}
.personal {
  height: 100%;
  .content {
    height: 100%;
    display: flex;
    // justify-content: center;
    align-items: center;
    padding: 0 10px;
    .pic {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 14px;
      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }
    .name {
      height: 30px;
      line-height: 30px;
      font-size: 17px;
      display: flex;
      align-items: center;
    }
  }
  :hover {
    background-color: #f6f9f8;
  }
}

.icon {
  display: flex;
  align-items: center;
  .circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    // text-align: center;
    // line-height: 54px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  :hover {
    background-color: #f6f9f8;
  }
}
.dateNow {
  height: 30px;
  line-height: 30px;
  font-size: 17px;
  margin-right: 24px;
  min-width: 200px;
  .date {
    margin-right: 25px;
  }
  .time {
    margin-right: 10px;
  }
}
.logo {
  img {
    height: 43px;
  }
}

.ant-layout {
  .ant-layout-header {
    height: 70px;
    background-color: #ffffff;
  }
  .ant-layout-has-sider {
    height: calc(100vh - 70px);
  }
  .ant-layout-sider {
    background-color: #ffffff;
  }
}

.sider-menus {
  border-right: none;
  margin-top: 20px;
  .ant-menu-item {
    color: var(--h1-color);
    font-size: 16px;

    &.ant-menu-item-selected,
    &.ant-menu-item-active {
      color: var(--h1-color-active);
      background-color: #f6f9f8;
      font-weight: bold;

      &::after {
        display: none;
      }

      &::before {
        border-left: 4px solid #5ab77b;
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
      }
    }
  }
}
</style>
